<template>
  <div class="xtx-pay-checkout-page">
    <div class="container">
      <div class="wrapper">
        <!-- 收货地址 -->
        <h3 class="box-title">税金计算</h3>
        <div class="box-body">
          <el-form :model="form">
            <el-form-item  label="分类" prop="category01">
              <div class="clearfix select_box">
                <el-form :model="formAddress">
                  <div class="sub_form">
                    <el-select class="select_address" v-model="formAddress.category01" placeholder="一级分类">
                      <el-option  v-for="(i,index) in taxCategoryOne" :key="index" :label="i.category_name" :value="i.category_name"  @click="getAddressCity(i.id)"></el-option>
                    </el-select>
                  </div>
                  <div class="sub_form"> 
                    <el-select class="select_address" v-model="formAddress.category02" placeholder="二级分类">
                      <el-option  v-for="(i,index) in taxCategoryTwo" :key="index" :label="i.category_name" :value="i.category_name" @click="getAddressTwoCity(i.id,i.tax_no)"></el-option>
                    </el-select>
                    <p>税号：{{ tax_number }}</p>
                  </div>
                  <div class="sub_form">
                    <el-select class="select_address" v-model="formAddress.category03" placeholder="三级分类" v-show="isVisible">
                      <el-option  v-for="(i,index) in taxCategoryThree" :key="index" :label="i.category_name" :value="i.category_name" @click="getAddressThreeCity(i.id,i.tax_no)" />
                    </el-select>
                    <p v-show="isVisible">税号：{{ tax_number2 }}</p>
                  </div>
                </el-form>
              </div>
            </el-form-item> 
            <el-form-item  label="价格" prop="price">
              <el-input v-model="form.price" placeholder="请输入商品价格" style="width: 200px;" />
            </el-form-item>
            <el-form-item  label="重量" prop="weight">
               <el-input v-model="form.weight" placeholder="请输入商品重量" style="width: 200px;" />
            </el-form-item>
            <el-form-item>
              
            </el-form-item>
            <el-button type="primary" size="default" @click="countSubmit">计算税金</el-button>
            <!-- <el-button type="info" size="default" @click="clearSubmit">重新计算</el-button> -->
          </el-form>
        </div>
        <!-- 商品信息 -->
       
      </div>
      <div class="tax_box">
        <table>
          <thead>
            <tr>
              <th  class="border" style="width: 310px;">分类</th>
              <th  class="border" style="width: 130px;">价格</th>
              <th  class="border" style="width: 130px;">重量</th>
             <!--  <th  class="border" style="width: 170px;">税号</th> -->
              <th  class="border" style="width: 105px;">税金</th>
              <th  class="border" style="width: 105px;">单位</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td  class="border">待获取</td>
              <td  class="border">待获取</td>
              <td  class="border">待获取</td>
              <!-- <td  class="border">待获取</td> -->
              <td  class="border">{{ taxValue }}</td>
              <td  class="border">元</td>
            </tr>
          </tbody>
        </table>
        
        
      </div>
    </div>
  </div>
</template>

<script setup>
import { getTaxOneAPI,getTaxTwoAPI,countTtaxAPI } from '@/apis/tax'
import { onMounted, ref,reactive } from 'vue'

const isVisible = ref(false);
const formAddress = ref({
  category01:"",
  category02:"",
  category03:"",
})
const taxCategoryOne = ref([])
const getAddressCityOne = ()=>{
  getTaxOneAPI()
  .then(res=>{
    //console.log(res);
    taxCategoryOne.value = res
    //console.log(taxCategoryOne.value);
  })
}
onMounted(()=>getAddressCityOne())

const taxCategoryTwo = ref([])
const getAddressCity = (id)=>{
  //console.log(id);
  getTaxTwoAPI(id)
  .then(res=>{
    //console.log(res);
    taxCategoryTwo.value = res
  })/* .catch(err=>{
    console.log(err.response.data);
  }) */
}

const countId = ref({})
const tax_number = ref(null)
const taxCategoryThree = ref([])
const getAddressTwoCity = (id,tax_no)=>{
  
  tax_number.value = tax_no
  //console.log(tax_number.value );
  countId.value = id
  getTaxTwoAPI(id)
  .then(res=>{
    //console.log(res);
    taxCategoryThree.value = res
    if(taxCategoryThree.value.length == 0){
      isVisible.value = false
      formAddress.value.category03 = '' 
      tax_number2.value = ""
    }else{
      isVisible.value = true
    }
  })
}
const tax_number2 = ref(null)
const getAddressThreeCity = (id,tax_no)=>{
  //console.log(id);
  countId.value = id
  tax_number2.value = tax_no
}

const form = reactive({
  price:"",
  weight:"",
  id:countId,
})

let ays = Object.keys(form)
const taxValue = ref(null)

const countSubmit = ()=>{
  countTtaxAPI(form)
  .then(res=>{
    console.log(res);
    taxValue.value = res
    formAddress.value = []
    tax_number.value = ""
    ays.map((k)=>{
      form[k] = undefined
    })
    isVisible.value = false
  })
} 


/* const clearSubmit = ()=>{
  formAddress.value = []
  tax_number.value = ""

  ays.map((k)=>{
    form[k] = undefined
  })
  isVisible.value = false
} */

</script>

<style lang='scss'>
.xtx-pay-checkout-page {
  background: #fff;
  margin-top: 20px;
  padding-bottom: 50px;
  .container{
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    .wrapper {
      background: #fff;
      padding: 0 20px;

      .box-title {
        font-size: 20px;
        font-weight: normal;
        padding-left: 10px;
        line-height: 70px;
        border-bottom: 1px solid #f5f5f5;
      }

      .box-body {
        padding: 20px 0;
        .select_box {
          height: 130px;
        }
        .sub_form{
          display: flex;
          align-items: center; 
          margin-bottom: 15px;
          p {
            padding-left: 10px;
          }
        }
      }
      
    }
    .tax_box{
      width: 800px;
      p {
        font-size:  2em;
      }
      table {
        width: 100%;
        th {
          font-size: 14px;
          padding: 8px 0;
          text-align: center;
          background: rgb(243, 246, 248);
        }
        td {
          padding: 8px 0;
          text-align: center;
          font-size: 14px;
        }
      }
    }
  }
  
}

</style>